/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
    <view>
        <view class="wrap">
            <view class="mobile-box">
                <view class="label">验证码已发送至：</view>
                <view class="mobile">{{mobile}}</view>
            </view>
            <view class="validation-box">
                <input  type="number" placeholder="请输入验证码" maxlength="6" v-model="code" placeholder-class="place">
                <view class="again" :class="[is_send?'':'btn-select']" @tap="ToResend">重新发送<block v-if="is_send">（{{countDownNum}}s）</block></view>
            </view>
            <view class="next" :class="[isFlag?'next-select':'']" @tap="next">下一步</view>
        </view>
    </view>
</template>
<script>
import {mapState} from "vuex";
import sendSmsMixin from "@/mixin/sendSms.js";
export default {
    data() {
        return {
            mobile:"",//手机号  
            sms_sms_time_out:"",//验证码有效时间  
            timer:null,//定时器
            is_send:true,
            scene:2,
            code:"",//验证码
        }
    },
    mixins: [sendSmsMixin],
    computed: {
        ...mapState(['config']),
         countDownNum:{//短信验证码有效时间
            get:function(){
                return this.sms_sms_time_out
            },
            set:function(val){
                this.sms_sms_time_out=val;
                
            }
        },
        isFlag(){
            if(this.code.length>0){
                return true
            }else{
                return false
            }
        }
    },
    onLoad(options){
        this.mobile=options.tel;
        this.sms_sms_time_out=this.config.sms_sms_time_out;
        // this.sms_sms_time_out=3;
        this.getTime()
    },
    methods: {
        /*时间计时器*/
       getTime(){
           let that=this;
           that.timer=setInterval(()=>{
                if(that.countDownNum==0){
                    clearInterval(that.timer)
                    that.is_send=false;
                    that.countDownNum=that.config.sms_sms_time_out;
                    return
                }else{
                    that.countDownNum--;
                }
            },1000)
       },
        /*下一步*/    
       next(){
            let url=`/pages/user/forgotPassword/forgotPswProcess-3?mobile=${this.mobile}&code=${this.code}`
            uni.navigateTo({
                 url:url
            })
       } 
    },

}
</script>
<style lang="scss">
    page{
        background: #fff;
    }
    .wrap{
        margin: 68rpx 70rpx 0; 
        .mobile-box{
            display: flex;
            flex-direction: row;
            align-items: center;
            color: #999999;
            font-size: 30rpx;
        }
        .validation-box{
            display: flex;
            flex-direction: row;
            align-items: center;
            border-bottom: 1px solid #E6E6E6;
            padding: 36rpx 0;
            input{
                flex: 1;
                color: #333;
                font-size: 36rpx;
            }
            .place{
                color: #999;
                font-size: 30rpx;
            }
            .again{
                position: relative;
                color: #999;
                font-size: 30rpx;

            }
            .btn-select{
                color: #333;
            }
            .again::after{
                content: "";
                width: 1px;
                height: 48rpx;
                background: #E6E6E6;
                position: absolute;
                left: -19rpx;
            }
        }
        .next{
            margin-top: 100rpx;
            width:610rpx;
            height:90rpx;
            background:rgba(204,204,204,1);
            border-radius:45rpx;
            text-align: center;
            line-height: 90rpx;
            color: #999999;
            font-size: 30rpx;
        }
        .next-select{
            background:linear-gradient(90deg,rgba(255,59,59,1) 0%,rgba(255,93,61,1) 100%);
            color: #fff;
        }
    }
</style>